import { ModalForm, ProFormDateTimeRangePicker, ProFormText } from '@ant-design/pro-components';
import { Space } from 'antd';
import React, { useState } from 'react';

interface ShowExportModelType {
  role: string | undefined;
  open: boolean;
  onOpenChange?: Function;
  onFin: Function;
}

function ShowExportModelInfo({ role, open = false, onOpenChange, onFin }: ShowExportModelType) {
  const formRef = React.useRef(null);
  const [responsive, setResponsive] = useState(false);

  return (
    <Space>
      <ModalForm
        title="导出信息"
        open={open}
        submitter={{
          searchConfig: {
            submitText: '导出',
            resetText: '取消',
          },
        }}
        onOpenChange={(open) => onOpenChange?.(open)}
        formRef={formRef}
        width={500}
        modalProps={{
          destroyOnClose: true,
          maskClosable: false,
        }}
        onFinish={async (values) => {
          console.log('model ', values);
          onFin({ ...values, role });
        }}
        // initialValues={}
      >
        {role === 'leader' ? (
          // 组长导出
          <ProFormText
            width="md"
            name="fileName"
            label="文件名"
            tooltip="请输入导出的文件名，请不用添加文件后缀"
            placeholder=""
            required
          />
        ) : (
          // 教师页面
          <ProFormText
            width="md"
            name="week"
            label="周次"
            tooltip="请输入当前为第几周"
            placeholder=""
            required
          />
        )}
        {/* 时间选择框 */}
        <ProFormDateTimeRangePicker
          name="dateTimeRange"
          label="时间区间"
          tooltip="请选择时间区间,系统会导出这段时间内的所有照片"
          required
        />
      </ModalForm>
    </Space>
  );
}

export default ShowExportModelInfo;
